<template>
  <div id="top">
    <img src="../../assets/img/1.logo.png" alt="华南理工大学经济与贸易学院" id="logo">
    <span id="span1">2019新型冠状病毒疫情机器学习项目</span>
    <div>
      <div id="div2" @click="toPersonal">
        <img src="../../assets/img/14.个人中心.png" alt="">
        <span>联系我们</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Top",
        methods: {
            toPersonal() {
                this.$router.push('/contact');
            },
        },
    }
</script>

<style scoped>
  #top {
    width: 1200px;
    height: 80px;
    display: flex;
    margin: 0 auto;
  }

  #logo {
    width: 300px;
    height: 65px;
    margin-top: 8px;
  }

  #span1 {
    width: 457px;
    font-size: 24px;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    margin-left: 100px;
    height: 80px;
    line-height: 80px;
  }

  #div2 {
    width: 100px;
    height: 26px;
    margin-left: 254px;
    margin-top: 27px;
    display: flex;
    cursor: pointer;
  }

  #div2 img {
    height: 26px;
    width: 26px;
  }

  #div2 span {
    width: 66px;
    height: 26px;
    font-size: 16px;
    color: rgba(0, 70, 140, 1);
    line-height: 26px;
    margin-left: 8px;
    cursor: pointer;
  }
</style>
